<template>
  <div>
    <!--模块1-- 顶部 -->
    <div class="catogry-top">
      <!-- layout布局 -->
      <van-row>
        <van-col span="20">
          <!-- 顶部导航 -->
          <van-nav-bar title="上新精选" left-text="返回" left-arrow @click-left="onClickLeft" />
        </van-col>

        <van-col span="4">
          <van-icon name="shopping-cart-o" @click="onCart"/>
        </van-col>
      </van-row>

      <!-- banner  -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品列表 -->
    <div class="catogry-bt">
      <!-- 商品列表大标题 -->
      <div class="catogry-bt-title">
        <h2>上新精选</h2>
        <span>精选新品 闭眼放心买</span>
      </div>
      <div class="catogry-bt-list">
        <van-list>
          <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
          <!-- 商品卡片 -->
          <van-card
            v-for="item in productList"
            :key="item.id"
            :desc="item.front_name"
            :title="item.name"
            :thumb="item.img_url"
          >
 
            <template #tags class="product-advantage">
              <van-tag plain type="danger" class="price-confirmed">30天价保</van-tag>
              <van-tag plain type="danger" class="member">VIP会员</van-tag>
            </template>
          </van-card>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
// 引入vant组件-banner懒加载
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
import { homeCatalog } from "@/api/home.js";
export default {
  name: "",
  data() {
    return {
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
      productList:[],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //跳转至购物车
    onCart(){
       this.$router.push({ path: "/cart" });
    }
  },
   async created() {
    let res = await homeCatalog();
    let data = res.data.data.currentCategory.subCategoryList;
    let data1= res.data.data.categoryList;
    // console.log(data );
    // console.log(data1);
   
    let data3=res.data.data;
    console.log(data3);

  this.productList=data1
  },
};
</script>

<style lang="scss" >
.catogry-top {
  .van-row {
    display: flex;
    align-items: center;
    .van-nav-bar__left {
      color: #ea8360;

      .van-nav-bar__text {
        font-size: 0.16rem;
        color: #ea8360;
      }
    }
    .van-icon {
      font-size: 0.24rem;
      color: #ea8360;
    }
  }
  img {
    width: 100%;
    height: 5rem;
  }
}
// 商品列表
.catogry-bt {
  background: #f2f5f5;
  .catogry-bt-title {
    display: flex;
    height: 0.4rem;
    line-height: 0.4rem;
    margin-bottom: 0.21rem;
    font-size: 0.12rem;
    h2 {
      font-size: 0.3rem;
      margin-right: 0.1rem;
      margin-bottom: 0.1rem;
    }
  }
  .catogry-bt-list {
   
    // 商品卡片样式
    .van-card__title {
      font-size: 0.14rem;
    }
    .van-card .van-card__price {
      color: #ef791e;

      // 商品价格
      .van-card__price-integer {
        font-size: 0.16rem;
      }
    }
    // 商品描述信息
    .van-card__desc {
      margin-bottom: 0.05rem;
      color: #818181;
      font-size: 0.1rem;
    }
    .product-advantage {
      // margin-bottom: 0.3rem;
    }
    // 30天报价
    .price-confirmed {
      border: 0.01rem solid #3579c2;
      color: #3579c2 !important;
      border-radius: 0.05rem;
      padding: 0.02rem;
      margin-right: 0.1rem;
    }
    // 会员
    .member {
      background: #f9ddcb;
      color: #3e2819;

      border-radius: 0.05rem;
      padding: 0.02rem;
    }
  }
}
</style>
